<!DOCTYPE html>
<html lang="en">
<div id="top-loading" style="width:100%;height:100%;z-index: 9999;background:rgba(0,0,0,0.3);position: relative";>  
    <img style="position: absolute;top:50%;left:50%;margin-top:-5px;margin-left:-30px" src="img/load.gif">  
</div>  
<head>
	<meta http-equive="Content-type" type="text/html" charset="UTF-8">
	<title>LOFTER</title>
	<link rel="stylesheet" href="stylesheets/print.css" type="text/css">
	<!-- <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" type="text/css"> -->
	<script src="js1/jquery-2.2.3.min.js" type="text/javascript"></script>
	<!-- <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript"></script> -->
	<script src="js1/sethomepage.js" type="text/javascript"></script>
	<script type="text/javascript"> 
	   window.scrollTo(0,0); 
		$(function(){  
		    // 页面加载完成，移除进度图片  
		    $("#top-loading").remove();  
		});  
   </script>  
</head>
<body>
   <div class="mod" id="mod" style="display:none">
		<div class="content">
	  	   <div class="content-head">
	  	   	<span>下载APP</span>
	  	   	<span id="close"></span>
	  	   </div><!-- content-head结束 -->
	  	   <div class="content-body">
	  	   	<div class="content-body-left">
					<div>
						<span>iphone:</span>
						<img src="img/iphonestore.png" alt="apple store">
					</div>
					<div>
						<span>iphone:</span>
						<img src="img/iphonestore.png" alt="apple store">
					</div>
					<div>
						<span>iphone:</span>
						<img src="img/androidstore.png" alt="android store">
					</div>
				</div><!-- content-body-left结束 -->
				<div class="content-body-right">
					<img src="img/2dcode.png" alt="2code">
				</div><!-- content-body-right结束 -->
	  	   </div><!-- content-body结束 -->
		</div><!-- content结束 -->  
	</div><!-- modal结束  -->
	<div id="header">
		<div id="bg">
			<div class="hidden">	
				<img class="bg1" src="img/1.jpg" alt="bgimg">
			</div>
			<div class="select">
				<img class="bg2" src="img/2.jpg" alt="bgimg">
			</div>
			<div class="hidden">
				<img class="bg3" src="img/3.jpg" alt="bgimg">
			</div>
			<div class="hidden">
				<img class="bg4" src="img/4.jpg" alt="bgimg">
			</div>
			<div class="hidden">
				<img class="bg5" src="img/5.jpg" alt="bgimg">
			</div>
			<div class="hidden">
				<img class="bg6" src="img/6.jpg" alt="bgimg">
			</div>
			<div class="hidden">
				<img class="bg7" src="img/7.jpg" alt="bgimg">
			</div>
		</div><!-- bg结束 -->
		<div class="wrapper">
			<img src="img/logo.png" alt="LOFTER"><!-- logo结束 -->
			<div class="notice">
			  <div class="lis">
					<ul id="lis">
						<li id="one">
							<div>注册</div>
							<div>
								<p>20张照片</p>
								<p>在线冲印</p>
							</div>
							<div>
								<img src="img/song.png" alt="送">
							</div>
						</li>
						<li id="two" class="selected">
						   登陆
						</li>
						<li id="three">
						   下载APP
						</li>
					</ul>
				</div><!-- lis结束 -->
				<div id="divs">
					<ul class="hid" id="divs-one">
						<div class="registe-left">
							<div>
								<input type="text" name="email" placeholder="常用邮箱/网易邮箱">
							</div>
							<div>
								<input type="password" placeholder="密码" name="password">
							</div>
							<div>
								<input type="text" placeholder="验证码" name="test">
								<p><img src="img/test.jpg" alt="验证码"></p>
							</div>
							<div>
								<a href="#">注&nbsp;&nbsp;册</a>
							</div>
						</div><!-- registe-left结束 -->
						<div class="registe-right">
							<span></span>
						  <span>或</span>
							<div><a hrf="#" >新浪微博登陆</a></div>							
							<div><a hrf="#">腾讯QQ登陆</a></div>
							<div><a hrf="#" >微信登陆</a></div>
						</div><!-- registe-right结束 -->
					</ul><!-- first-child结束 -->
					<ul class="test" id="divs-two">
						<div class="loading-left">
							<input type="text" placeholder="常用邮箱/网易邮箱" name="email">
							<input type="password" placeholder="密码" name="password">
							<div><a href="#">登&nbsp;&nbsp;陆</a></div>
						   <div class="loading-left-bottom">
						      <div>
								  <input id="agree" type="checkbox" name="agree" checked="checked">
								  <label for="agree"></label>
							   </div>
							   <span>十天内免登陆</span>
								<div>            
					            <a href="#">忘记密码？</a>
					            <span>|<span>
					            <a href="#">找回账户</a>
			               </div>
	                  </div><!-- loading-left-bottom结束 -->
						</div><!-- loading-left结束 -->
						<div class="loading-right">
						  <span></span>
						  <span>或</span>
							<div><a hrf="#" >新浪微博登陆</a></div>							
							<div><a hrf="#">腾讯QQ登陆</a></div>
							<div><a hrf="#" >微信登陆</a></div>
						</div>
					</ul><!-- text结束 -->
					<ul class="hid" id="divs-three">
						<div class="download-left">
							<div>
								<span>iphone:</span>
								<img src="img/iphonestore.png" alt="apple store">
							</div>
							<div>
								<span>iphone:</span>
								<img src="img/iphonestore.png" alt="apple store">
							</div>
							<div>
								<span>iphone:</span>
								<img src="img/androidstore.png" alt="android store">
							</div>
						</div>
						<div class="download-right">
							<img src="img/2dcode.png" alt="2code">
						</div>
					</ul><!-- last-child结束 -->
				</div>
			</div><!-- notice结束 -->
		</div><!-- wrapper结束 -->
		<div id="bottom">
			<div id="dir">
		    	<a id="dir-left" href="#"></a>
		    	<a id="dir-right" href="#"></a>
	      </div>
	      <div id="person">
				<div class="hide">
					<span>背景作品：</span>
		         <b>虞孜林</b>
				</div>
				<div class="on">
					<span>背景作品：</span>
		          <b>Misky</b>
				</div>
				<div class="hide">
					<span>背景作品：</span>
		         <b>上一秒的世界</b>
				</div>
				<div class="hide">
					<span>背景作品：</span>
		         <b>KUNA桑</b>
				</div>
				<div class="hide">
					<span>背景作品：</span>
		         <b>LOFOLO</b>
				</div>
				<div class="hide">
					<span>背景作品：</span>
		         <b>WuY</b>
				</div>
				<div class="hide">
					<span>背景作品：</span>
		         <b>李美林Meilin</b>
				</div>
			</div>
		</div>
	</div><!-- header结束 -->
	<!-- 中间部分，包括record、hobby、homepage、mobile、manner几个小模块 -->
	<div id="main-body">
		<div class="record">
			<div class="wrap">
				<p>随性的记录方式</p>
				<p>
					方便地记录照片、文字、音乐、视频，适用于iPhone、iPad和Android移动客户端及PC端，让你随时随地的记录与分享。
	         </p><!-- 第二块的p结束 -->
	         <div>
	        	   <img src="img/dashboard.jpg" alt="dashboard">
	         </div><!-- 第三块的div结束 -->
	         <div>
		        	<div class="record-one-left">
		        		<img src="img/icon-1.png" alt="icon-1">
		        		<p>博客导入导出</p>
		        		<p>方便地从其他博客平台导入数据到LOFTER。</p>
		        	</div>
		        	<div class="record-one-right">
		        		<img src="img/icon-2.png" alt="icon-2">
		        		<p>自动同步</p>
		        		<p>方便同步你的内容到新浪微博、QQ空间等社交网络，还可以分享到微信、易信聊天和朋友圈。</p>
		        	</div>
	         </div><!-- 第四块的div结束 -->
	         <div>
	        	   <div class="record-two-left">
		        		<img src="img/icon-3.png" alt="icon-3">
		        		<p>高质量图片</p>
		        		<p>
			        		使用无损图片压缩技术，上传图片保留高质量细节，当你手机处于wifi网络，将自动加载全高清图片。
		        		</p>
	        	   </div>
		        	<div class="record-two-right">
		        		<img src="img/icon-4.png" alt="icon-4">
		        		<p>独立域名</p>
			        	<p>
				        	LOFTER个人主页，可以自定义以LOFTER.com为基础的二级域名，还可以绑定自己的独立域名。
		        		</p>
		        	</div>
	         </div><!-- 第五块的div结束 -->
			</div><!-- wrap结束 -->
		</div><!-- record结束 -->
		<div class="hobby">
			<p>发现有共同爱好的人</p><!-- 标题结束 -->
			<p>
			   LOFTER汇聚了数百万的摄影、胶片玩家，绘画及动漫爱好者，并不断衍生出更多的兴趣圈子，无论是设计、艺术、科技、时尚、旅行、读书、电影评论都有精彩的人与内容不断产出。
         </p><!-- 摘要结束 -->
			<div>
				<img src="img/quanzi.jpg" alt="quanzi">
			</div><!-- 第三块div结束，图片 -->
			<div>
				<div class="hobby-left">
        		<img src="img/icon-5.png" alt="icon-5">
        		<p>自动同步</p>
        		<p>方便同步你的内容到新浪微博、QQ空间等社交网络，还可以分享到微信、易信聊天和朋友圈。</p>
        	</div>
        	<div class="hobby-right">
        		<img src="img/icon-6.png" alt="icon-6">
        		<p>自动同步</p>
        		<p>方便同步你的内容到新浪微博、QQ空间等社交网络，还可以分享到微信、易信聊天和朋友圈。</p>
        	</div>
			</div><!-- 第四块div结束 -->
		</div><!-- hobby结束 -->
		<div class="homepage">
			<p>彰显个性的个人主页</p><!-- 标题结束 -->
			<p>
					已经拥有234套风格各异的个人主页模板，而且这些模板可以轻松的完成自定义样式及导航，
					让你的个人主页变得与众不同，提供了10套移动端浏览器适配模板，当使用手机浏览器访问主页时，也如此优雅。
			</p><!-- 摘要结束 -->
	      <div>
		      <div>
		      	<img src="img/blog-1.jpg" alt="blog-1">
		      </div>
            <div>
		      	<img src="img/blog-2.jpg" alt="blog-2">
		      </div>
		      <div>
		      	<img src="img/blog-3.jpg" alt="blog-3">
		      </div>
		      <div>
		      	<img src="img/blog-4.jpg" alt="blog-4">
		      </div>
		      <div>
		      	<img src="img/blog-5.jpg" alt="blog-5">
		      </div>
		      <div>
		      	<img src="img/blog-6.jpg" alt="blog-6">
		      </div>
	      </div><!-- 轮播图结束 -->
      </div><!-- homepage结束 -->
		<div class="mobile">
			<p>轻巧的移动LOFTER</p><!-- 标题结束 -->
			<p>
			   通过iPhone、iPad版及Android版客户端，体验LOFTER的快速、漂亮、有趣，提供多种时下最热的贴纸，让你的相片分享增加乐趣，还可以在移动端查看附近的人。 
         </p><!-- 摘要结束 -->
	      <a id="control-mod">马上加载></a>
			<div>
				<img src="img/mobilelofter.jpg" alt="mobilelofter">
			</div><!-- 第三块div结束，图片 -->
			<div>
				<div class="mobile-left">
        		<img src="img/icon-7.png" alt="icon-7">
        		<p>查找附近的同好</p>
        		<p>
	        		通过移动端的定位功能，发现附近有趣的人
        		</p>
        	</div>
        	<div class="mobile-right">
        		<img src="img/icon-8.png" alt="icon-8">
        		<p>独有的贴纸</p>
        		<p>
	        		提供丰富、有趣、限量贴纸，参与贴纸类主题话题，让手机摄影更有趣、好玩。
        		</p>
        	</div>
			</div><!-- 第四块div结束 -->
		</div>
		<div class="manner">
			<p>LOFTER - 记录生活，发现同好</p>
			<div>
				<span></span>
				<span>注册免费冲印20张照片</span>
			</div>
			<div>
				<a href="#">邮箱注册</a>
				<a href="#">新浪微博注册</a>
				<a href="#">腾讯QQ注册</a>
				<a href="#">微信注册</a>
			</div>
		</div>
	</div><!-- main-body结束 -->
	<div id="footer">
		<div>
			<a href="#">&nbsp;联系我们&nbsp;|</a>
			<a href="#">&nbsp;招贤纳士&nbsp;|</a>
			<a href="#">&nbsp;移动客户端&nbsp;|</a>
			<a href="#">&nbsp;风格模板&nbsp;|</a>
			<a href="#">&nbsp;官方博客&nbsp;|</a>
			<span>网易公司版权所有&nbsp;©1997-2016</span>
			<div>
				<span></span>
				<a href="#">浙江公安备 &nbsp;33010002000017号</a>
			</div>
			<span>ICP备：浙B2-20090185-5</span>
		</div><!-- div结束 -->
	</div><!-- footer结束 -->
	<div class="flash">
	  <span></span>
		<div class="wrap">
		  <div class="flash-left">
				<span></span>
				<span>注册免费冲印20张照片：</span>
			</div>
			<div class="flash-right">
				<a href="#">邮箱注册</a>
				<a href="#">新浪微博注册</a>
				<a href="#">腾讯QQ注册</a>
				<a href="#">微信注册</a>
			</div>
		</div>
	</div><!-- //flash结束 -->
</body>
</html>